<template>
    <div>
        <h1>权限列表</h1>
  <el-table :data="rolelist" style="width: 100%">
    <el-table-column prop="id" label="编码" width="180" />
    <el-table-column prop="role" label="权限名称" width="180" />
    <el-table-column label="权限" >
        <template  #default="scope">
              <el-tree
    style="max-width: 600px"
    :data="scope.row.tree"
    :props="defaultProps"
    @node-click="handleNodeClick"
  />
        </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" >
          Edit
        </el-button>
        <el-button
          size="small"
          type="danger"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script lang="ts" setup>
import {getRoleList} from '@/request/index'
import {ref} from 'vue'
import arrToTree from '@/utils/arrToTree';
const rolelist=ref([])
getRoleList().then(res=>{
    console.log('rolelist',res);
    let resData=res.data.roleData
    resData=resData.map(item=>{
        item.tree=arrToTree(item.auth)
        return item
    })
    console.log(resData,11112);
    
    rolelist.value=resData
})


interface Tree {
  label: string
  children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
  console.log(data)
}

// const data: Tree[] = [
//   {
//     label: 'Level one 1',
//     children: [
//       {
//         label: 'Level two 1-1',
       
//       },
//     ],
//   },
//   {
//     label: 'Level one 2',
//     children: [
//       {
//         label: 'Level two 2-1',
       
//       },
//       {
//         label: 'Level two 2-2',
       
//       },
//     ],
//   },
//   {
//     label: 'Level one 3',
//     children: [
//       {
//         label: 'Level two 3-1',
       
//       },
//       {
//         label: 'Level two 3-2',
        
//       },
//     ],
//   },
// ]

const defaultProps = {
  children: 'children',
  label: 'name',
}
</script>
